<!--
这是一个用于管理学生的网页，主要功能包括添加学生和查看学生列表。
在添加学生部分，用户需要填写学生的详细信息，然后点击"添加学生"按钮将信息提交到服务器。
在查看学生列表部分，会列出所有已经添加的学生，每个学生的信息都会显示为一个链接，点击链接可以查看该学生的面试状态。
-->

{% extends 'base.html' %}

{% block content %}
<head>
    <meta charset="UTF-8">
    <title>学生管理页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        h1, h2 {
            color: #333;
        }
        h1 {
            text-align: center;
        }
        form {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            max-width: 400px;
            margin: 20px auto;
        }
        form button {
            background-color: #5cb85c;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        form button:hover {
            background-color: #4cae4c;
        }
        ul {
            list-style: none;
            padding: 0;
        }
        ul li {
            background-color: #fff;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        ul li a {
            text-decoration: none;
            color: #337ab7;
        }
        ul li a:hover {
            text-decoration: underline;
        }
        .empty {
            color: #999;
        }
    </style>
</head>
<body>


<h2 style="text-align: center;">添加学生</h2>
<form method="post" style="text-align: center;">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">添加学生</button>
</form>

<h2>我的学生列表</h2>
<ul>
    {% for relation in students %}
        <li><a href="/interview_status/{{ relation.student.email }}/">{{ relation.student.email }}</a> </li>
    {% empty %}
        <li class="empty">没有学生。</li>
    {% endfor %}
</ul>

</body>
</html>
{% endblock %}